<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between" style="padding: 40px 20px;">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
					</image>
					<!-- <view v-if="!form.name" @click="handleToLogin" class="login-tip">
						点击登录
					</view> -->
					<!-- <view  @click="handleToInfo" class="user-info">
						<view class="u_title">
							{{ form.nickName||'-' }}<span style="margin: 0 10px;">|</span>{{ form.name||'-' }}
							<br>
							<div>{{form.deptName||'-'}}</div>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="menu-list" style="margin: 10px;">
			<!-- <view class="list-cell list-cell-arrow" @click="handleToInfo">
				<view class="menu-item-box">
					<view>个人信息</view>
				</view>
			</view> -->
			<view class="list-cell list-cell-arrow" @click="handleToPwd">
				<view class="menu-item-box">
					<view class="iconfont icon-edit  menu-icon" style="color: #0275a1;;"></view>
					<view>修改密码</view>
				</view>
			</view>
			<div style="margin-top: 10px;">
				<u-button type='primary' text="退出" @click="handleLogout" throttleTime='1000'></u-button>
			</div>
		</view>

	</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'

	export default {
		data() {
			return {
				form:{
					name:"",
					nickName:"",
					deptName:''
				},
				userType: '-', //2.3检测
				version: getApp().globalData.config.appInfo.version
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			}
			// windowHeight() {
			// 	return uni.getSystemInfoSync().windowHeight - 50
			// }
		},
		methods: {
			show(){
				let form = uni.getStorageSync('storage_data')
				this.userType = form.vuex_userType
				this.$nextTick(e=>{
					this.$set(this.form,'name',form.vuex_name)
					this.$set(this.form,'nickName',form.vuex_nickName)
					this.$set(this.form,'deptName',form.vuex_deptName)
				})
			},
			handleToPwd() {
				this.$tab.navigateTo('/pages/mine/pwd/index')
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			// handleToAvatar() {
			// 	this.$tab.navigateTo('/pages/mine/avatar/index')
			// },
			handleLogout() {
				let vm = this
				uni.showActionSheet({
					title: '提示',
					itemList: ['退出'],
					success() {
						vm.$store.dispatch('LogOut').then(() => {
							vm.$tab.reLaunch('/pages/index')
						})
					}
				})
				// this.$modal.confirm('确定退出系统吗？').then(() => {
				// 	this.$store.dispatch('LogOut').then(() => {
				// 		this.$tab.reLaunch('/pages/index')
				// 	})
				// })
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：133713780')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	.mine-container {
		width: 100%;
		height: 100%;

		.header-section {
			height: 150px;
			margin: 5px 10px;
			border-radius: 10px;
			// padding: 15px 15px 45px 15px;
			background-color: #0275a1;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 15px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>